<template>
  <section>
    <div class="active-miaosha">
      <p class="tool_name">秒杀小工具<span style="color: red;">(价格单位：元)</span></p>

      <div>
        <li>
          <div class="start-active">
            <el-select v-model="params.plant_name" placeholder="请选择" size="large" @change="changeSelectPlant">
              <el-option
                v-for="(item, index) in plants"
                :key="index"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </div>
          <div class="start-active">
              <el-input size="large" v-model="params.price"></el-input>
          </div>
          <div class="start-active active-switch"><el-button size="large" type="success" @click="setMiaoShaPrice(1, -1)">开始活动</el-button></div>
        </li>
      </div>

      <div class="live-miaosha">
        <li v-for="(item, index) in plant_data" style="margin-bottom: 10px;">
          <div class="start-active"><el-input size="large" v-model="item.plant_name" readonly></el-input></div>
          <div class="start-active"><el-input size="large" v-model="item.price"></el-input></div>
          <div class="start-active active-switch"><el-button size="large" type="warning" @click="setMiaoShaPrice(2, index)">恢复价格</el-button></div>
        </li>
      </div>
    </div>
  </section>
</template>

<script type="text/ecmascript-6">
  import util from '../../util'
  import { apiTree } from '../../apiTree'

  export default {
    data() {
      return {
        plants: [],
        params: {
          plant_name: '',
          price: 0
        },
        plant_data: []
      }
    },
    methods: {
      // 获得植物名
      getPlantName() {
        this.plants = []
        apiTree('miaosha/index', 'field/getAllPlantName', {}).then((res) => {
          if (res.s === 1) {
            res.d.data.forEach((item) => {
              this.plants.push(item.name);
            })
          }
        })
      },
      // 选择单个植物
      changeSelectPlant() {
        let param = {name: this.params.plant_name};
        apiTree('miaosha/index', 'field/getSinglePlantInfo', param).then((res) => {
          if (res.s === 1) {
            this.params.price = parseInt(res.d.price) / 100;
          }
        });
      },
      // 获得秒杀活动的菜品信息
      getMiaoShaInfo() {
        apiTree('miaosha/index', 'tools/getMiaoShaInfo', {}).then((res) => {
          if (res.s === 1) {
            this.plant_data = res.d.data;
          }
        });
      },
      // 批量修改秒杀菜品价格
      setMiaoShaPrice(_type, _index) {
        let param = {};
        if (_index === -1 && _type === 1) {
          if (util.isEmpty(this.params.plant_name) || util.isEmpty(this.params.price.toString())) {
            this.$message.error('参数为空!');
            return;
          }
          if (!util.isInt((this.params.price * 100).toFixed(0))) {
            this.$message.error('价格错误!');
            return;
          }
          this.params.type = _type;
          param = this.params;
        }
        if (_type === 2) {
          if (util.isEmpty(this.plant_data[_index].plant_name) || util.isEmpty(this.plant_data[_index].price.toString())) {
            this.$message.error('参数为空!');
            return;
          }
          if (!util.isInt((this.plant_data[_index].price * 100).toFixed(0))) {
            this.$message.error('价格最多两位小数!');
            return;
          }
          this.plant_data[_index].type = _type;
          param = this.plant_data[_index];
        }
        apiTree('miaosha/index', 'tools/setMiaoSha', param, 'POST').then((res) => {
          if (res.s === 1) {
            this.$message({
              message: '提交成功',
              type: 'success'
            });
            // 新增缓存
            if (_type === 1) {
              this.plant_data.push({plant_name: param.plant_name, price: param.price});
            }
            // 删除缓存
            if (_type === 2) {
              this.plant_data.splice(_index, 1);
            }
          } else if (res.s < 1) {
            this.$message.error(res.err_str)
          }
        });
      }
    },
    created() {
      this.getPlantName();
      this.getMiaoShaInfo();
    }
  }
</script>

<style lang="scss">
  li {
    list-style: none;
  }
  .active-miaosha {
    width: 800px;
    padding: 20px;
    margin-top: 10px;
    border: 1px solid #13ce66;
    overflow: hidden;
    float: left;
  }
  .start-active {
    display: inline-block;
    width: 300px;
    margin-right: 10px;
  }
  .active-switch {
    width: 100px;
  }
  .tool_name {
    height: 40px;
    line-height: 40px;
    color: #11b95c;
    text-indent: 6px;
    font-size: 18px;
  }
  .live-miaosha {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #CCCCCC;
  }
</style>